<template>
  <div class="loading-demo-page">
    <h2>加载动画演示</h2>
    <p>这里将展示各种美观、实用的加载动画样式。</p>
    <div class="input-grid">
      <t-card class="input-card">
        <div class="card-content-center">
          <CubeLoader />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <BouncingBallsLoader />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <TruckLoader />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <JumpingBoxLoader />
        </div>
      </t-card>
      <t-card class="input-card">
        <div class="card-content-center">
          <BoxesCubeLoader />
        </div>
      </t-card>
      <t-card class="input-card speedcar-card">
        <div class="card-content-center">
          <SpeedCarLoader />
        </div>
      </t-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Card as TCard } from 'tdesign-vue-next';
import CubeLoader from '@/components/loading-animations/CubeLoader.vue';
import BouncingBallsLoader from '@/components/loading-animations/BouncingBallsLoader.vue';
import TruckLoader from '@/components/loading-animations/TruckLoader.vue';
import JumpingBoxLoader from '@/components/loading-animations/JumpingBoxLoader.vue';
import BoxesCubeLoader from '@/components/loading-animations/BoxesCubeLoader.vue';
import SpeedCarLoader from '@/components/loading-animations/SpeedCarLoader.vue';
</script>

<style>
.loading-demo-page {
  padding: 32px;
}
:deep(.dark) .loading-demo-page {
  background: #18181c !important;
}
.input-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-top: 32px;
}
.speedcar-card {
  grid-column: span 3;
}
.input-card {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  border: 1px solid #f2f3f5;
  transition: box-shadow 0.2s, background 0.2s, border 0.2s;
}
:deep(.dark) .input-card {
  background: #23232a !important;
  border: 1px solid #23232a !important;
  box-shadow: none !important;
}
.card-content-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
:deep(.dark) .loading-demo-page h2,
:deep(.dark) .loading-demo-page p {
  color: #bcbcbc !important;
}
p {
  color: #adadad;
}
</style> 